<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>绑定手机号</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
        $(function (){
            var gou= $('#kewugou').data('if')
            if (gou==true){
                //子页面传给父页面的数据
                var txt = "true";
                parent.GetChildValue(txt);
            }
        })

        function fasong(){
            var btn=document.getElementById("fas");
            var phone=document.getElementById("phone");
            var emailHelp=document.getElementById("emailHelp");
            if (phone.value!=""){
                var reg = /^1[3456789]\d{9}$/;

                if(reg.test(phone.value)){
                    emailHelp.innerText=""
                    btn.innerHTML = '发送中.....';
                    $.post("${pageContext.request.contextPath}/SmsUtilsServlet",{phone:phone.value},function (result){
                        if (result!=""){
                            $('#max-for').data('ba',result)
                               var time=60;
                               var timer = setInterval(function() {
                                   if (time == 0) {
                                       // 清除定时器和复原按钮
                                       clearInterval(timer);
                                       btn.disabled = false;
                                       btn.innerHTML = '发送验证码';
                                   } else {
                                       btn.innerHTML = '还剩下' + time + '秒';
                                       time--;
                                   }
                               }, 1000)

                        }else {
                            $('#max-for').data('ba',"发送失败")
                            if (confirm("发送失败，请检查当前网络是否出现问题!!!")){
                                btn.innerHTML = '发送验证码';
                            }else {
                                btn.innerHTML = '发送验证码';

                            }
                        }
                    })
                    return true;
                }else{
                    emailHelp.innerText="手机号码格式不对"
                    return false;
                }

            }else {
                emailHelp.innerText="请输入手机号码"
            }

        }
        function CodeUtil(){
            var max_for=$('#max-for').data('ba')
            var Codo=document.getElementById("exampleInputPassword1");
            var phone=document.getElementById("phone");
            var emailHelp2=document.getElementById("emailHelp2")
            var emailHelp=document.getElementById("emailHelp");
            var reg = /^1[3456789]\d{9}$/;
            if (phone.value!=""){
                emailHelp.innerText=""
                if (reg.test(phone.value)){
                    emailHelp.innerText=""
                   if (Codo.value!=""){
                       emailHelp2.innerText=""
                       if (Codo.value==max_for){
                           emailHelp2.innerText=""
                           return true;
                       }{
                           emailHelp2.innerText="验证码输入错误"
                           return false;
                       }
                   }else {
                       emailHelp2.innerText="请输入验证码"
                       return false;
                   }
                }else {
                    emailHelp.innerText="输入的手机号码格式不正确"
                    return false;
                }
            }else {
                emailHelp.innerText="请输入手机号码"
                return false;
            }

        }
    </script>
</head>
<body style="margin-left: 20px;margin-top: 20px">


    <div id="kewugou" style="width: 100%;" data-if="${requestScope.codeMi}">
            <c:if test="${sessionScope.usersList.phone!=''&&sessionScope.usersList.phone!=null}">
                <div style="width: 99%;height: 50px;background-color: #7b7bfe"></div>
                <div style="width: 99%;height: 100px;text-align: center">
                    <div style="color: #000;font-weight: bold;font-size: 25px;margin-top: 30px">已绑定手机号码</div>
                    <div style="color: red;margin-top: 30px">无需再绑定手机号码</div>
                </div>
            </c:if>
        <c:if test="${sessionScope.usersList.phone==''||sessionScope.usersList.phone==null}">
            <c:if test="${sessionScope.namecode=='false'}">
                <div style="width: 99%;height: 50px;background-color: #7b7bfe"></div>
                <div style="width: 99%;height: 100px;text-align: center">
                    <div style="color: #000;font-weight: bold;font-size: 25px;margin-top: 30px">请输入手机号</div>
                    <div style="color: #b6b6b6;margin-top: 30px">手机号仅用来登录和保护账号</div>
                </div>
                <form style="width: 50%;margin: 60px auto;" action="${pageContext.request.contextPath}/UpdateUserServlet" data-ba="" method="post" id="max-for" onsubmit="return CodeUtil()">
                    <div class="form-group">
                        <label for="phone">绑定手机号</label>
                        <input type="text" class="form-control" id="phone" name="phone" aria-describedby="emailHelp">
                        <small id="emailHelp" class="form-text text-danger"></small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">验证码</label>
                        <div style="width: 100%;display: flex">
                            <input style="width: 80%" type="password" class="form-control" id="exampleInputPassword1">
                            <div onclick="fasong()" id="fas" style="width: 20%;height: 38px;text-align: center;line-height: 38px;background-color: #7b7bfe;border-radius: 5px;color: #fff;margin-left: 5px;cursor: pointer">发送验证码</div>
                        </div>
                        <small id="emailHelp2" class="form-text text-danger"></small>

                    </div>

                    <div class="form-group" style="opacity: 0">
                        <div style="width: 100%;display: flex">
                            <input style="width: 80%" type="text" class="form-control" id="id" name="id" value="${sessionScope.usersList.id}">
                        </div>
                    </div>
                    <button style="width: 100%;margin-top: 60px" type="submit" class="btn btn-primary">完成</button>
                </form>
            </c:if>

            <c:if test="${sessionScope.namecode=='true'}">
                <div style="width: 99%;height: 50px;background-color: #7b7bfe"></div>
                <div style="width: 99%;height: 100px;text-align: center">
                    <div style="color: #000;font-weight: bold;font-size: 25px;margin-top: 30px">绑定成功</div>
                    <div style="color: red;margin-top: 30px">祝您生活愉快</div>
                </div>
            </c:if>
        </c:if>



    </div>


</body>
</html>
